import React, { Component } from 'react';
import axios from 'axios'
import qs from 'qs'
import './xq.css'
import { Steps, Table, Button } from 'antd';
import { Link } from 'react-router-dom'
const { Step } = Steps;
const columns = [
  {
    title: '商品编号',
    dataIndex: 'goodsId',
    key: 'goodsId',
    align: 'center'
  },
  {
    title: '商品名称',
    dataIndex: 'goodsName',
    key: 'goodsName',
    align: 'center'
  },
  {
    title: '单价',
    dataIndex: 'goodsRealPrice',
    key: 'goodsRealPrice',
    align: 'center',
    render: text => <span>{'￥' + text + '.00'}</span>
  },
  {
    title: '数量',
    key: 'goodsNumber',
    dataIndex: 'goodsNumber',
    align: 'center'
  },
  {
    title: '总价',
    key: 'total',
    dataIndex: 'total',
    align: 'center',
    render: text => <span>{'￥' + text + '.00'}</span>
  },
];

class LiebiaoXiangqing extends Component {
  constructor(props) {
    super(props);
    this.state = {
      orderNumber: '',
      userName: '',
      orderTime: '',
      addressReceiverPhone: '',
      danState: '',
      jine: '',
      orderPayTime: '',
      orderOutTime: '',
      orderFinishTime: '',
      ddcurrent: '',
      addressReceiverName: '',
      addressName: '',
      orderMessage: '',
      tableList: []
    }
  }
  componentDidMount() {
    axios.post('api/backstage/shop/findOneOrderList', qs.stringify({ orderNumber: this.props.location.query.record.orderNumber }),
      // axios.post('api/backstage/shop/findOneOrderList', qs.stringify({ orderNumber: 202104021320501 }),
      { headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' } }).then(res => {
        let arr = res.data.data
        arr[0].total = Number(arr[0].goodsNumber) * Number(arr[0].goodsRealPrice)
        this.setState({
          orderNumber: res.data.data[0].orderNumber,
          userName: res.data.data[0].userName,
          orderTime: res.data.data[0].orderTime,
          addressReceiverPhone: res.data.data[0].addressReceiverPhone,
          danState: this.props.location.query.record.danState,
          jine: this.props.location.query.record.jine,
          orderPayTime: this.props.location.query.record.orderPayTime,
          orderOutTime: this.props.location.query.record.orderOutTime,
          orderFinishTime: this.props.location.query.record.orderFinishTime,
          addressReceiverName: res.data.data[0].addressReceiverName,
          addressName: res.data.data[0].addressName,
          tableList: arr,
          moneyTotal: arr[0].total,
          goodsNumber: arr[0].goodsNumber,
          orderMessage: res.data.data[0].orderMessage === '' ? '发顺丰发顺丰发顺丰，重要的事情说三遍' : res.data.data[0].orderMessage,
          ddcurrent:
            this.props.location.query.record.orderFinishTime ? 3 :
              this.props.location.query.record.orderOutTime ? 2 :
                this.props.location.query.record.orderPayTime ? 1 : 0

        })
      });
  }
  fanhui = () => {
    this.props.history.go(-1)
  }
  render() {
    return (
      <div className='content'>
        <div className='hezi'>
          <div className='tt'>
            <h1>订单信息</h1>
            <div className='ttc'>
              <span className='ttsta'>订单号</span>
              <span className='ttstaa'>{this.state.orderNumber}</span>
            </div>
            <div className='ttc'>
              <span className='ttsta'>买家姓名</span>
              <span className='ttstaa'>{this.state.userName}</span>
            </div>
            <div className='ttc'>
              <span className='ttsta'>下单时间</span>
              <span className='ttstaa'>{this.state.orderTime}</span>
            </div>
            <div className='ttc'>
              <span className='ttsta'>联系电话</span>
              <span className='ttstaa'>{this.state.addressReceiverPhone}</span>
            </div>
            <div className='ttc'>
              <span className='ttsta'>状态</span>
              {this.state.danState === '已完成' && <span className='ttstaa agren'>{this.state.danState}</span>}
              {this.state.danState === '售后中' && <span className='ttstaa agren'>{this.state.danState}</span>}
              {this.state.danState === '待付款' && <span className='ttstaa no'>{this.state.danState}</span>}
              {this.state.danState === '已出库' && <span className='ttstaa agren'>{this.state.danState}</span>}
              {this.state.danState === '待出库' && <span className='ttstaa no'>{this.state.danState}</span>}
              {this.state.danState === '待出库' &&
                <Link to={{ pathname: '/chuku', query: { record: this.props.location.query.record, res: this.state.tableList } }}><Button
                  type="primary">
                  出库
            </Button></Link>
              }

            </div>
            <div className='ttc'>
              <span className='ttsta'>订单金额</span>
              <span className='ttstaa'>{this.state.jine}</span>
            </div>
          </div>
          <div className='tt'>
            <h1>订单进度</h1>
            <div className='ttc zt'>
              <Steps progressDot current={this.state.ddcurrent}>
                <Step title="提交订单" description={this.state.orderTime ? this.state.orderTime : '0000-00-00 00:00:00'} />
                <Step title="付款成功" description={this.state.orderPayTime ? this.state.orderPayTime : '0000-00-00 00:00:00'} />
                <Step title="订单出库" description={this.state.orderOutTime ? this.state.orderOutTime : '0000-00-00 00:00:00'} />
                <Step title="完成" description={this.state.orderFinishTime ? this.state.orderFinishTime : '0000-00-00 00:00:00'} />
              </Steps>
            </div>
          </div>
          <div className='tt'>
            <h1>买家信息</h1>
            <div className='ttc'>
              <span className='ttsta'>收获地址</span>
              <span className='ttstaa'>
                <span className='aa'>{this.state.addressReceiverName}</span>
                <span className='aa'>{this.state.addressReceiverPhone}</span>
                <span className='aa'>{this.state.addressName}</span>
              </span>
            </div>
            <div className='ttc'>
              <span className='ttsta'>买家留言</span>
              <span className='ttstaa aa'>{this.state.orderMessage}</span>
            </div>
          </div>
          <div className='tt'>
            <h1>订单商品</h1>
            <div className='ttc'>
              <Table
                columns={columns}
                dataSource={this.state.tableList}
                pagination={false} />
            </div>
          </div>
          <div className='tt'>
            <h1>付款信息</h1>
            <div className='ttc'>
              <span className='ttsta'>商品数量</span>
              <span className='ttstaa'>{this.state.goodsNumber}</span>
            </div>
            <div className='ttc'>
              <span className='ttsta'>商品总价</span>
              <span className='ttstaa'>{'￥' + this.state.moneyTotal + '.00'}</span>
            </div>
            <div className='ttc'>
              <span className='ttsta'>运费</span>
              <span className='ttstaa'>￥0.00</span>
            </div>
            {this.state.danState === '已完成' && <h1>实付款:{'￥' + this.state.moneyTotal + '.00'}</h1>}
            {this.state.danState === '售后中' && <h1>实付款:{'￥' + this.state.moneyTotal + '.00'}</h1>}
            {this.state.danState === '待付款' && <h1>实付款:{'￥0.00'}</h1>}
            {this.state.danState === '已出库' && <h1>实付款:{'￥' + this.state.moneyTotal + '.00'}</h1>}
            {this.state.danState === '待出库' && <h1>实付款:{'￥' + this.state.moneyTotal + '.00'}</h1>}


            <div className='ttc'>
              <Button onClick={this.fanhui}>
                返回
            </Button>
            </div>

          </div>
        </div>
      </div>
    );
  }
}

export default LiebiaoXiangqing;